<template>
  <div>

    <el-row justify="start">
      <el-col :span="4">
        <div>
          <el-input
              placeholder="请输入内容"
              v-model="search"
              clearable>
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <el-button @click="refresh">刷新</el-button>
          <el-button @click="add">新增流程</el-button>

          <!--          <el-button @click="clearFilter">清除所有过滤器</el-button>-->
        </div>
      </el-col>
    </el-row>
    <el-row justify="start">
      <el-col :span="24">
        <div class="">
          <el-table
              :data="this.tableData"
              style="width: 100%">
            <el-table-column
                fixed
                prop="processName"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="processCode"
                label="编码">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>
            <el-table-column
                prop="modifyTime"
                label="最后修改日期"
                width="180">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="280">
              <template #default="scope">
                <el-button @click="handleClick(scope.row)" type="default" size="small">查看</el-button>
                <el-button @click="edit(scope.row)" type="default" size="small">修改</el-button>
                <el-button type="default" size="small" @click="this.handleConfig(scope.row)">配置</el-button>
                <el-button type="default" size="small" @click="handleRemove(scope.row)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-col>
    </el-row>

    <el-dialog v-model="processDiag.visible" width="300px">
      <el-form :model="processDiag">
        <el-form-item label="流程名称">
          <el-input v-model="processDiag.processName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="流程编码">
          <el-input v-model="processDiag.processCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="流程描述">
          <el-input v-model="processDiag.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日志级别">
          <el-select v-model="processDiag.logLevelCode" class="m-2" placeholder="Select" size="large">
            <el-option
                v-for="item in this.logLevelList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="引导线程池">
          <el-select v-model="processDiag.bootThreadCode" class="m-2" placeholder="Select" size="large">
            <el-option
                v-for="item in this.threadPoolList"
                :key="item.threadCode"
                :label="item.threadName"
                :value="item.threadCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="预执行线程池">
          <el-select v-model="processDiag.prepareThreadCode" class="m-2" placeholder="Select" size="large">
            <el-option
                v-for="item in this.threadPoolList"
                :key="item.threadCode"
                :label="item.threadName"
                :value="item.threadCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="执行线程池">
          <el-select v-model="processDiag.executeThreadCode" class="m-2" placeholder="Select" size="large">
            <el-option
                v-for="item in this.threadPoolList"
                :key="item.threadCode"
                :label="item.threadName"
                :value="item.threadCode"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="流程版本">-->
        <!--          <el-input v-model="processDiag.version" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="processDiag.visible = false">取 消</el-button>
        <el-button type="primary" @click="this.saveProcess">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="this.processVersionDiag"
               width="100%">
      <ProcessVersionManager ref="prv"/>
    </el-dialog>
  </div>

</template>

<script>
import {post} from '../../config/Request.js'
import {h} from "vue";
import ProcessVersionManager from "@/views/process/ProcessVersionManager.vue";
import apis from "@/request/apis.js";

export default {
  name: "ProcessList",
  components: {ProcessVersionManager},
  watch: {
    groupId: function () {
      this.refresh();
    }

  },
  props: ["groupId"],
  data() {
    return {
      search: '',
      tableData: [],
      logLevelList: [],
      processVersionDiag: false,
      threadPoolList: [],
      initStr: '',
      processDiag: {
        visible: false,
        prepareThreadCode: '',
        processCode: '',
        description: '',
        logLevelCode: 'Basic',
        viewFlag: false,
        executeThreadCode: '',
        bootThreadCode: '',
        processName: "",
        groupId: null,
        id: null
      }
    };
  },
  created() {
    this.initStr = JSON.stringify(this.processDiag);
  },
  mounted() {
    this.refresh();
    this.queryThreadPoolList();
    this.queryLogLevelList();
  },
  methods: {
    async handleClick(row) {
      await this.edit(row);
      this.processDiag.viewFlag = true;

    },
    async edit(row) {
      const data = await apis.post("/square-lake/process/get_by_id", {id: row.id, version: row.version});
      this.processDiag = data;
      this.processDiag.visible = true;

    },
    async queryThreadPoolList() {
      const data = await apis.queryThreadPoolList( {
        disableFlag: 0
      });
      this.threadPoolList = data;
    },
    async queryLogLevelList() {
      const data = await apis.post("/square-lake/process/log_level_list", {});
      this.logLevelList = data;
    },
    add() {
      if (!this.groupId) {
        this.$message.error('请选择分组');
        return
      }
      this.processDiag.visible = true;
    },
    async handleRemove(row) {
      await apis.post("/square-lake/process/remove_by_id", {id: row.id});
      this.$notify({
        title: '提示',
        message: h('i', {style: 'color: teal'}, '删除成功')
      });
      this.refresh();
    },
    handleConfig(row) {
      // this.$router.push({
      //   name: "flow", query: {
      //     id: row.id,
      //     version: row.version
      //   }
      // });
      this.processVersionDiag = true;
      setTimeout(function () {
        this.$refs.prv.queryList(row.id);
      }.bind(this), 0);

    },
    async saveProcess() {
      if (this.processDiag.viewFlag) {
        this.processDiag.visible = false;
        return
      }
      if (!this.processDiag.processName) {
        this.$message.error('请输入名称');
        return;
      }
      this.processDiag.groupId = this.groupId;
      if (!this.processDiag.logLevelCode) {
        this.$message.error('请选择日志级别');
        return;
      }
      if (!this.processDiag.processCode) {
        this.$message.error('请输入流程编码');
        return;
      }
      await apis.post("/square-lake/process/save", this.processDiag);
      this.processDiag = JSON.parse(this.initStr);
      this.refresh();
    },
    refresh() {
      this.queryProcessList();
    },
    async queryProcessList() {
      const data = await apis.post("/square-lake/process/list", {groupId: this.groupId})
      // console.log(data);
      // this.$set(this, "tableData", data);
      this.tableData = data;
    }
  }
}
</script>

<style scoped>

</style>